﻿
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section style{
    <style>
        .canvasDiv {
            position: relative;
            width: 800px;
            height: 800px;
            margin: 0 auto;
            margin-top: 50px;
        }

        canvas {
            border: 1px solid;
        }

        .bgcanvas {
        }

        .fgcanvas {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
}
<div id="canvasDiv" class="canvasDiv">
    <canvas class="bgcanvas" id="background_canvas" width="800" height="800">
        抱歉！您的浏览器不支持 Html5，无法正确显示本页内容。建议您升级浏览器版本，或者选择支持 HTML5 的浏览器浏览本页面。
    </canvas>
    <canvas class="fgcanvas" id="foreground_canvas" width="800" height="800" onmousemove="fg_onmousemove(event)" onclick="fg_onclick(event)">
        抱歉！您的浏览器不支持 Html5，无法正确显示本页内容。建议您升级浏览器版本，或者选择支持 HTML5 的浏览器浏览本页面。
    </canvas>
</div>
<div style="position:absolute; top:20px; right:20px; background:rgba(0,0,0,0.5); width:200px; height:300px; color:white; padding:10px;">
    <div>调试信息：</div>
    <hr />
    <div id="mx">鼠标 X 坐标:</div>
    <div id="my">鼠标 Y 坐标:</div>
    <hr />
    <div id="px">圆周 X 坐标:</div>
    <div id="py">圆周 Y 坐标:</div>
</div>

@section script{
    <script src="~/Scripts/mycanvas.min.js"></script>
    <script>
        var DEBUG = true;

        var hasValue = false;

        $(function () {
            // 获取背景 canvas
            var canvas = document.getElementById("background_canvas");
            var context = canvas.getContext("2d");
            // 圆心
            var center = getCneterPoint(canvas);
            // 半径
            var radius = getRadius(canvas);
            // 颜色
            var color = 'rgb(200,200,200)';
            // 背景画一个圆环 模仿管道
            drawAnnulus(context, center.x, center.y, radius, color, 50);
            // 画个圆心
            drawCircle(context, center.x, center.y, 30, color);
            // 画十字连线
            drawLine(context, center.x - radius, center.y, center.x + radius, center.y, 10, color);
            drawLine(context, center.x, center.y - radius, center.x, center.y + radius, 10, color);
        })

        // 鼠标移动事件
        function fg_onmousemove(event) {
            if (!hasValue) {
                // 获取前景 canvas
                var canvas = document.getElementById("foreground_canvas");
                var context = canvas.getContext("2d");
                // 圆心
                var center = getCneterPoint(canvas);
                // 半径
                var radius = getRadius(canvas);
                // 颜色
                var color = 'rgb(100,200,100)';
                // 清除前景内容 
                context.clearRect(0, 0, canvas.width, canvas.height);
                // 得到鼠标坐标
                var point = getMousePoint(event, "canvasDiv");
                // 得到点的坐标
                point = getPoint(center.x, center.y, point.x, point.y, radius);
                // 在圆周上画出对应的点
                drawCircle(context, point.x, point.y, 30, color);
                // 画个圆心
                drawCircle(context, center.x, center.y, 30, color);
                // 画出与圆心的连线
                drawLine(context, center.x, center.y, point.x, point.y, 10, color);
                // 打印提示
                if (DEBUG) {
                    $("#px").html("圆周 X 坐标:" + point.x);
                    $("#py").html("圆周 Y 坐标:" + point.y);
                }
            }
        }

        // 鼠标点击事件
        function fg_onclick(event) {
            if (!hasValue) {
                hasValue = true;
                // 获取背景 canvas
                var canvas = document.getElementById("background_canvas");
                var context = canvas.getContext("2d");
                // 圆心
                var center = getCneterPoint(canvas);
                // 半径
                var radius = getRadius(canvas);
                // 颜色
                var color = 'rgb(100,200,100)';
                // 得到鼠标坐标
                var point = getMousePoint(event, "canvasDiv");
                // 得到点的坐标
                point = getPoint(center.x, center.y, point.x, point.y, radius);
                // 在圆周上画出对应的点
                drawCircle(context, point.x, point.y, 30, color);
                // 画个圆心
                drawCircle(context, center.x, center.y, 30, color);
                // 画出与圆心的连线
                drawLine(context, center.x, center.y, point.x, point.y, 10, color);
            }
        }

        // 根据圆心 及 鼠标坐标 求圆周上对应点的坐标
        function getPoint(a, b, p, q, r) {
            var l = Math.sqrt(Math.pow(q - b, 2) + Math.pow(p - a, 2));
            var k = l / r;
            var x = (p - a) / k + a;
            var y = (q - b) / k + b;
            return {
                x: parseInt(x),
                y: parseInt(y)
            };
        }

        // 获取鼠标相对于元素的坐标
        function getMousePoint(event, id) {
            event = event || window.event;
            var x = event.clientX - document.getElementById(id).offsetLeft;
            var y = event.clientY - document.getElementById(id).offsetTop;

            // 打印提示
            if (DEBUG) {
                $("#mx").html("鼠标 X 坐标:" + x);
                $("#my").html("鼠标 Y 坐标:" + y);
            }

            return {
                x: x,
                y: y
            };
        }

        // 获取圆心坐标
        function getCneterPoint(canvas){
            return {
                x: canvas.width / 2,
                y: canvas.height / 2,
            };
        }

        // 获取半径
        function getRadius(canvas) {
            return (canvas.width > canvas.height ? canvas.height : canvas.width) / 2.5;
        }
    </script>
}

